<html>
<head>
    <title>Using requestAnimationFrame()</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        body {
        background: #dddddd;
    }

        #canvas {
        background: #ffffff;
        cursor: pointer;
        margin-left: 10px;
        margin-top: 10px;
        -webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
        -moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
        box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    }

        #controls {
        margin-top: 10px;
        margin-left: 15px;
    }
    </style>
</head>

<body>

<canvas id='canvas' width='700' height='700'>
    Canvas not supported
</canvas>


</body>
<script>
    var L = 1
    var total = 500
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d')
    function drawRect(x, y) {
        x = L * x
        y = canvas.height - y * L
        context.fillRect(x, y - L, L, L)
    }
    // drawRect(0, 0)
    function drawLine(x_start, y_start, x_end, y_end) {
        let delta_x = x_end - x_start
        let delta_y = y_end - y_start
        let slope = delta_y / delta_x
        console.log("slope=" + slope)
        let cnt = 0
        let x_current = x_start
        let y_current = y_start
        let offset = 0
        let d = 0
        let a = 2 * delta_x * d
        while (cnt < total) {
            drawRect(x_current, y_current)
            let x_next = x_current + 1
            let y_next = y_current
            if (a + 2 * delta_y - 2 * offset * delta_x - 2 * delta_x > 0) {
                y_next = y_current + 1
                offset = 1
            } else {
                offset = 0
            }
            a = a + 2 * delta_y - 2 * offset * delta_x
            x_current = x_next
            y_current = y_next
            cnt += 1
        }
   }
    drawLine(0, 0, 15, 5)
    // drawLine(0, 0, 5, 15)


</script>
</html>
